import { DatePicker } from '@/components/AntdProxy';
import Crud from '@/components/Crud';
import { LineSelect } from '@/components/CustomForm';

import { formatSeconds } from '@/utils/format';
import request from '@/utils/request';
import { DownloadOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import dayjs from 'dayjs';
import { useRef } from 'react';

const getList = async (params) => {
  const res = await request({
    url: '/datas/summary/line/trip/group/list',
    method: 'GET',
    custom: true,
    params: params,
  });
  return {
    total: res?.total || 0,
    data: res?.data || [],
  };
};

const Index = () => {
  const crudRef = useRef();

  const columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 65,
      render: (text, record, index) => index + 1,
    },
    {
      title: '线路',
      dataIndex: 'lineName',
      fixed: 'left',
      width: 280,
    },
    {
      title: '趟次数',
      dataIndex: 'total',
      width: 100,
    },
    {
      title: '平均时长',
      dataIndex: 'avgDuration',
      width: 100,
      render: (text) => formatSeconds(text || 0),
    },
    {
      title: '平均装车时长',
      dataIndex: 'avgLoadDurations',
      width: 120,
      render: (text) => formatSeconds(text || 0),
    },
    {
      title: '平均卸车时长',
      dataIndex: 'avgUnloadDurations',
      width: 120,
      render: (text) => formatSeconds(text || 0),
    },
    {
      title: '总时长',
      dataIndex: 'duration',
      width: 100,
      render: (text) => formatSeconds(text || 0),
    },
    {
      title: '总装车时长',
      dataIndex: 'loadDurations',
      width: 120,
      render: (text) => formatSeconds(text || 0),
    },
    {
      title: '总卸车时长',
      dataIndex: 'unloadDurations',
      width: 120,
      render: (text) => formatSeconds(text || 0),
    },
  ];

  const fields = [
    {
      label: '线路',
      name: 'lineId',
      children: <LineSelect placeholder="请选择线路" />,
    },
    {
      label: '开始日期',
      name: 'fromTime',
      children: (
        <DatePicker
          allowClear={false}
          placeholder="请选择开始日期"
          format="YYYY-MM-DD"
        />
      ),
    },
    {
      label: '结束日期',
      name: 'toTime',
      children: (
        <DatePicker
          allowClear={false}
          placeholder="请选择结束日期"
          format="YYYY-MM-DD"
        />
      ),
    },
  ];

  const handleExport = async () => {
    const params = crudRef.current?.getParams();
    const res = await request({
      url: '/datas/summary/line/trip/group/export/list',
      method: 'GET',
      params,
    });
    if (res) {
      window.open(res);
    }
  };

  return (
    <>
      <Crud
        ref={crudRef}
        rowKey="lineId"
        queryFormProps={{
          labelCol: 7,
          initialValues: {
            fromTime: dayjs().subtract(30, 'day').startOf('day'),
            toTime: dayjs().subtract(1, 'day').endOf('day'),
          },
        }}
        fields={fields}
        columns={columns}
        request={getList}
        transformParams={(params) => {
          return {
            ...params,
            fromTime: params?.fromTime?.format('YYYY-MM-DD'),
            toTime: params?.toTime?.format('YYYY-MM-DD'),
          };
        }}
        toolbar={
          <>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={handleExport}
            >
              导出
            </Button>
          </>
        }
      />
    </>
  );
};

export default Index;
